<!DOCTYPE html>
<html lang="en" th:fragment="html (title,header,content,head,footer,leftSidebar,rightSidebar,htmlType)" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title th:text="${title}"></title>
    <link rel=stylesheet th:href="@{/assets/css/style.css}">
    <link rel=stylesheet th:href="@{/assets/css/main.css}">
    <style>
        :root {
            --halo-comment-widget-base-font-family: var(--article-font-family);
            --halo-comment-widget-base-font-size: var(--article-font-size);
            --halo-search-widget-base-font-size: var(--article-font-size);
            --halo-search-widget-base-font-family: var(--article-font-family);
        }
        [data-scheme="dark"] {
            --halo-comment-widget-component-form-input-bg-color: #475569;
            --halo-comment-widget-component-form-input-color: #ffffff;
            --halo-comment-widget-component-form-input-border-color: #495056;
            --halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
            --halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 0.15em #1c3966;
            --halo-comment-widget-component-form-button-login-bg-color: #334155;
            --halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
            --halo-comment-widget-component-form-button-login-border-color: #475569;
            --halo-comment-widget-component-form-button-submit-border-color: #475569;
            --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
            --halo-comment-widget-component-form-button-emoji-color: #cbd5e1;

            --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
            --halo-comment-widget-component-comment-item-action-color: #64748b;
            --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;

            --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
            --halo-comment-widget-component-pagination-button-bg-color-active: #475569;
            --halo-comment-widget-component-pagination-button-border-color-active: #475569;

            --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
            --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
            --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
            --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
            --halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
            --halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);


            --halo-search-widget-color-modal-layer: rgba(0, 0, 0, 0.8);
            --halo-search-widget-color-modal-content-bg: rgb(15 23 42);
            --halo-search-widget-color-form-input: rgb(255, 255, 255);
            --halo-search-widget-color-form-input-placeholder: rgb(148 163 184);
            --halo-search-widget-color-form-input-bg: rgb(15 23 42);
            --halo-search-widget-color-form-divider: rgb(30 41 59);
            --halo-search-widget-color-result-item-bg: rgb(30 41 59);
            --halo-search-widget-color-result-item-hover-bg: rgb(51 65 85);
            --halo-search-widget-color-result-item-title: rgb(255 255 255);
            --halo-search-widget-color-result-item-content: rgb(148 163 184);
            --halo-search-widget-color-command-kbd-item: rgb(148 163 184);
            --halo-search-widget-color-command-kbd-border: rgb(30 41 59);
            --halo-search-widget-color-result-empty: rgb(148 163 184);
        }



    </style>
    <link rel="shortcut icon" th:href="@{${#strings.isEmpty(site.favicon) ? '/assets/img/jiewen_icon.png' : site.favicon}}"/>
</head>
<body class=article-page>
<!-- 左上角用户头像 -->
<div class="top-left-avatar" th:if="${not #strings.isEmpty(theme.config.basic.topLeftAvatar)}">
    <img th:src="${theme.config.basic.topLeftAvatar}" 
         alt="用户头像" 
         width="40" 
         height="40" 
         class="user-avatar">
</div>
<script>
    (function() {
        const e = "StackColorScheme";
        localStorage.getItem(e) || localStorage.setItem(e, "light")
    })()
</script>
<script>
    (function() {
        const t = "StackColorScheme",
            e = localStorage.getItem(t),
            n = window.matchMedia("(prefers-color-scheme: dark)").matches === !0;
        e == "dark" || e === "auto" && n ? document.documentElement.dataset.scheme = "dark": document.documentElement.dataset.scheme = "light"
    })()
</script>
<div class="container main-container flex on-phone--column extended">
<!--左边栏-->
    <th:block th:if="${leftSidebar == true}">
        <th:block th:replace="~{modules/left-sidebar}" />
    </th:block>

<!--右边栏-->
    <th:block th:if="${rightSidebar == true}">
        <th:block th:replace="~{modules/right-sidebar}" />
    </th:block>


    <th:block th:replace="${content}"></th:block>



</div>

<script src=https://cdn.jsdelivr.net/npm/node-vibrant@3.1.6/dist/vibrant.min.js
        integrity="sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM=" crossorigin=anonymous>
</script>
<script type=text/javascript th:src="@{/assets/js/main.js}" defer>
</script>
<script>
    (function() {
        const e = document.createElement("link");
        e.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap",
            e.type = "text/css",
            e.rel = "stylesheet",
            document.head.appendChild(e)
    })()
</script>
<th:block th:if="${htmlType == 'post' or htmlType == 'links'}">
    <script>
        document.addEventListener("DOMContentLoaded", function(){
            var section = document.querySelector("#article-content");
            var headings = section.querySelectorAll("h1, h2, h3, h4, h5, h6");
            for(var i = 0; i < headings.length; i++){
                var heading = headings[i];
                if(!heading.id){
                    heading.id = "title-" + heading.textContent.replace(/\s+/g, '-');
                }
            }
        });

    </script>
<script type="text/javascript" th:src="@{/assets/js/tocbot.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/plugins.js}"></script>
</th:block>
<script type="text/javascript">
    function articleSidebar(){
        const sideContainer = document.querySelector('')
    }
    document.addEventListener('DOMContentLoaded', function () {
        const currentPath = window.location.pathname; // 获取当前路径
        const menuItems = document.querySelectorAll('#main-menu li a');
        menuItems.forEach(function(item) {
            if (item.getAttribute('href') === currentPath) {
                item.parentElement.classList.add('current');
            }
        });
    });

    // 子菜单现在使用纯CSS悬停效果，无需JavaScript
</script>
<th:block th:if="${theme.config.basic.lazyLoading}">
<script>
    var imgs = document.getElementsByClassName('lazyLoading')
    scrollFn()
    // 监听滚动事件
    window.onscroll = scrollFn
    function scrollFn() {
        var clietH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||  document.body.scrollTop;
        // console.log(clietH, scrollTop);
        Array.from(imgs).forEach((item) =>{
            let eleTop = item.offsetTop
            // console.log(eleTop)
            let count = scrollTop + clietH - eleTop
            // console.log(count)
            // 可设置为>100 查看懒加载效果
            if (count > 0) {
                //从data-url中取出真实的图片地址赋值给scr
                item.setAttribute('src', item.getAttribute('data-src'))
            }
        })
    }
</script>
</th:block>
<script>
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();

    // 设置请求方法和请求地址
    xhr.open("GET", "https://zj.v.api.aa1.cn/api/weibo-rs/", true);

    // 发送请求
    xhr.send();

    // 监听状态改变事件
    xhr.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            // 将响应数据转换为JSON格式
            var response = JSON.parse(this.responseText);

            // 获取热搜数据
            var hotData = response.data;

            // 创建ul元素
            var ul = document.createElement("ul");
            ul.className = "hot-ranking-list";

            // 遍历热搜数据，创建li元素
            for (var i = 0; i < 5; i++) {
                var hot = hotData[i];

                // 创建li元素
                var li = document.createElement("li");
                li.className = "hot-ranking-list_item";

                // 创建a元素
                var a = document.createElement("a");
                a.href = hot.url;
                a.target = "_blank";
                a.title = hot.title;

                // 创建span元素
                var spanOrder = document.createElement("span");
                spanOrder.className = "hot-ranking_order hot-ranking_order-" + hot.index;
                spanOrder.textContent = hot.index;

                var spanText = document.createElement("span");
                spanText.className = "hot-ranking_text";

                var spanTitle = document.createElement("span");
                spanTitle.className = "hot-ranking_title";
                spanTitle.textContent = hot.title;

                var spanNumber = document.createElement("span");
                spanNumber.className = "hot-ranking_number";
                spanNumber.textContent = hot.hot;

                var spanHot = document.createElement("span");
                if (hot.index <= 3){
                    spanHot.className = "hot-ranking_hot";
                    spanHot.textContent = "热";
                }
                else {
                    spanHot.className = "hot-ranking_new";
                    spanHot.textContent = "新";
                }

                // 将span元素添加到a元素中
                spanText.appendChild(spanTitle);
                spanText.appendChild(spanNumber);
                a.appendChild(spanOrder);
                a.appendChild(spanText);
                a.appendChild(spanHot);

                // 将a元素添加到li元素中
                li.appendChild(a);

                // 将li元素添加到ul元素中
                ul.appendChild(li);
            }

            // 将ul元素添加到页面中
            document.getElementById("weibo_hot").appendChild(ul);
        }
    };

</script>
<script>
    const searchBox = document.querySelector('.search-form')
    if(searchBox){
        searchBox.addEventListener('click', e=>{
            e.preventDefault()
            SearchWidget.open()
        })

    }
</script>
</body>
</html>
